<template>
  <div class="content">
    <img class="bg" src="../../../assets/bg/header.png">
    <div class="registerBox">
      <div class="tel">
        <i class="iconfont icon-shouji"></i>
        <input type="tel" placeholder="请输入11位手机号" maxlength="11" v-model="formdata.tel" @keyup="telkeyup" @focus="telkeyup"/>
        <i class="mintui mintui-field-error" v-show="closeIcon.icon1" @click="clearTel"></i>
      </div>
      <div class="verification">
        <i class="iconfont icon-dunpai1"></i>
        <input type="text" placeholder="请输入验证码" maxlength="4" v-model="formdata.verifyCode" @keyup="verkeyup" @focus="verkeyup"/>
        <i class="mintui mintui-field-error" v-show="closeIcon.icon2" @click="clearVer"></i>
      </div>
      <div class="verification-btn" @click="getImgCode" v-bind:class="{'getcode1': flag, 'getcode2': !flag}">{{codeTime}}</div>
      <div class="psw">
        <i class="iconfont icon-suo"></i>
        <input type="password" maxlength="16" :type="isShowPwd" placeholder="请输入密码" v-model="formdata.password" @keyup="pswkeyup" @focus="pswkeyup"/>
        <i class="mintui mintui-field-error" v-show="closeIcon.icon3" @click="clearPsw"></i>
        <i @click="isShowPwdFn(isShowPwd)" class="iconfont" style="font-size:18px;" :class="{'icon-yanjing1':isShowPwd=='password','icon-yanjing':isShowPwd=='text'}"></i>
      </div>
      <!-- <div class="msg">注册即同意<span><router-link to="/registerassociation">《水珠钱包注册协议》</router-link></span></div> -->
      <div class="sublimt" @click='login'>免费申请贷款</div>
      <!-- <div class="tologin">已有账号，去<span><router-link to="/login">&nbsp;登录&nbsp;</router-link></span></div> -->
    </div>
    <img class="bg" src="../../../assets/bg/footer.png">  
    <!-- 图形验证码 -->
    <div class="verifycode-model" v-if="verifyShow">
      <div class="verifycode-model-inner">
        <div class="verifycode-model-inner-top">请输入图形验证码
          <i class="iconfont icon-guanbi" @click="closeModel"></i>
        </div>
        <div class="verifycode-model-inner-content">
          <input type="text" v-model="imgCode" />
          <img :src="codePic" @click="verifyCode" />
        </div>
        <div class="verifycode-model-inner-footer" @click="startTime">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { MessageBox, Indicator } from "mint-ui";
import "../../../js/lib/flexble.js";
import bus from "../../../js/lib/bus.js";
import util from "../../../js/lib/util.js";
import commons from "../../../common/js/common.js";
import Top from "components/Header/Header";
export default {
  name: "register",
  data() {
    return {
      formdata: {
        tel: "",
        password: "",
        verifyCode: "",
        cid: commons.getParameter('cid')
      },
      codeTime: "发送验证码",
       isShowPwd:'password',
      imgCode: "",
      flag: true,
      iconShow: true,
      codePic: "/loansupermarket-app/img/getVerifyCode?num=" + Math.random(),
      verifyShow: false,
      closeIcon: {
        icon1: false,
        icon2: false,
        icon3: false
      }
    };
  },
  watch: {
    formdata: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        // window.sessionStorage.setItem('tel',curVal.tel);
      },
      deep: true
    }
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
  },
  methods: {
    isShowPwdFn(val) {
      if (val == "text") {
        this.isShowPwd = "password";
      } else {
        this.isShowPwd = "text";
      }
    },
    telkeyup() {
      if (!/^\d+$/.test(this.formdata.tel)) {
        this.formdata.tel = this.formdata.tel.replace(/\.\d*|[^\d]+/, "");
      }
      if (this.formdata.tel) {
        this.closeIcon.icon1 = true;
      }
      this.closeIcon.icon2 = false;
      this.closeIcon.icon3 = false;
    },
    verkeyup() {
      if (this.formdata.verifyCode) {
        this.closeIcon.icon2 = true;
      }
      this.closeIcon.icon1 = false;
      this.closeIcon.icon3 = false;
    },
    pswkeyup() {
      if (this.formdata.password) {
        this.closeIcon.icon3 = true;
      }
      this.closeIcon.icon1 = false;
      this.closeIcon.icon2 = false;
    },
    clearTel() {
      this.formdata.tel = "";
      this.closeIcon.icon1 = false;
    },
    clearVer() {
      this.formdata.verifyCode = "";
      this.closeIcon.icon2 = false;
    },
    clearPsw() {
      this.formdata.password = "";
      this.closeIcon.icon3 = false;
    },
    // 获取图片验证码
    getImgCode() {
      this.imgCode = "";
      if (this.formdata.tel == "") {
        MessageBox.alert("手机号码不能为空！", "提示");
        return;
      } else if (!/^1[34578]\d{9}$/.test(this.formdata.tel)) {
        MessageBox.alert("手机号码输入有误！", "提示");
        return;
      } else {
        this.verifyCode();
        // 关闭模态框
        if (this.flag) {
          //验证手机号，如果未注册，则进行图形验证码
          this.$http
            .get(
              "/loansupermarket-app/saveBorrower/checkPhone?phone=" +
                this.formdata.tel
            )
            .then(response => {
              var resBody = response.body;
              if (resBody.code == "000") {
                // 重新获取验证码
                this.verifyShow = true; //显示图形验证码
              } else {
                MessageBox.alert(resBody.mesg, "提示");
              }
            });
        }
      }
    },
    // 获取验证码判断
    getCode() {
      if (!/^1[34578]\d{9}$/.test(this.formdata.tel)) {
        //正则判断手机号码是否正确
        MessageBox("提示", "手机号码输入有误！");
        return;
      }

      // 验证码60s
      this.flag = !this.flag;
      let time = 60;
      let that = this;
      if (!this.flag) {
        var timer = setInterval(function() {
          time -= 1;
          that.codeTime = time + "s后重新获取";
          if (time == 0) {
            clearInterval(timer);
            that.codeTime = "发送验证码";
            that.flag = true;
          }
        }, 1000);
      }
      // 短信验证码post参数
      let postData = {
        phone: this.formdata.tel,
        smsType: 1,
        imgCode: this.imgCode
      };
      // 获取短信验证码
      this.$http
        .get(
          "/loansupermarket-app/sms/sendSmsByImg?reqType=1&phone=" +
            postData.phone +
            "&smsType=" +
            postData.smsType +
            "&imgCode=" +
            postData.imgCode
        )
        .then(response => {
          var resBody = response.body;
          if (resBody.code == "000") {
          } else {
            this.flag = !this.flag;
            MessageBox.alert(resBody.mesg, "提示");
            clearInterval(timer);
            that.codeTime = "获取验证码";
          }
        });
    },
    // 关闭图形验证码模态框
    closeModel() {
      this.verifyShow = false;
    },
    // 启动获取验证码
    startTime(flag) {
      this.verifyShow = false;
      if (this.imgCode.length == 0) {
        MessageBox.alert("请输入图形验证码", "提示");
        return;
      }
      if (flag) {
        this.getCode();
      }
    },

    // 登录
    login() {
      let $channel = util.getQueryString('channel');
      // 登录接口参数
      let postData = {
        phone: this.formdata.tel,
        code: this.formdata.verifyCode, //短信验证码
        // cid:this.formdata.cid,
        pwd: this.formdata.password,
        channel: $channel
      };

      if (!this.formdata.tel) {
        MessageBox.alert("手机号码不能为空~", "提示");
        return;
      } else if (!/^1[34578]\d{9}$/.test(this.formdata.tel)) {
        MessageBox.alert("请输入正确的手机号码~", "提示");
        return;
      } else if(!(/^[a-z0-9A-Z]{6,16}$/.test(this.formdata.password))) {
        MessageBox.alert("密码需由6~16位数字或字符组成~", "提示");
        return;
      } else {
        // 登录接口
        Indicator.open("加载中...");
        this.$http
          .post("/loansupermarket-app/user/registerLogin", postData)
          .then(response => {
            var resBody = response.body;
            // console.log(resBody)
            if (resBody.code == "000") {
              // 查询支持储蓄卡
              this.$http
                .get(
                  "/loansupermarket-pay/card/bind/loadSupportBank?cardType=1"
                )
                .then(function(response) {
                  var resBody = response.body;
                  if (resBody.code == "000") {
                    window.localStorage.setItem(
                      "bankList",
                      JSON.stringify(resBody.data)
                    );
                  } else {
                  }
                });
              // 查询支持信用卡
              this.$http
                .get(
                  "/loansupermarket-pay/card/bind/loadSupportBank?cardType=2"
                )
                .then(function(response) {
                  var resBody = response.body;
                  if (resBody.code == "000") {
                    window.localStorage.setItem(
                      "creditCardList",
                      JSON.stringify(resBody.data)
                    );
                  } else {
                  }
                });

              //查询用户信息
              // this.$http
              //   .get("/loansupermarket-pay/card/bind/getIdCardInfo")
              //   .then(function(response) {
              //     var resBody = response.body;
              //     if (resBody.code == "000") {
              //       window.localStorage.setItem(
              //         "realName",
              //         resBody.data.realName
              //       );
              //       window.localStorage.setItem(
              //         "idcardCode",
              //         resBody.data.idcardCode
              //       );
              //     } else {
              //     }
              //   });

              // 如果url带有platformId参数，那么跳转到贷款平台详情页，否则调到首页

              setTimeout(() => {
                Indicator.close();
                if (commons.getParameter('history') == 1) {
                  // this.$router.go(-1);
                  window.history.go(-1);
                } else {
                  location.href = `${commons.paths}/loan/index.html?channel=${$channel}`;
                }
              }, 500);
            } else {
              Indicator.close();
              MessageBox.alert(resBody.mesg, "提示");
            }
          });
      }
    },
    verifyCode() {
      this.codePic =
        "/loansupermarket-app/img/getVerifyCode?num=" + Math.random();
    }
  }
};
</script>

<style lang="scss">
@import '../../../scss/base.scss';
$boxHei: 1.1rem;
$inpHei: 1.05rem;
.content {
  background-color: $redDeepColor;
  position: relative;
  .bg {
    display: block;
    width: 100%;
  }
  .registerBox {
    position: absolute;
    width: 90%;
    left: 50%;
    top: 7rem;
    margin-left: -45%;
    background-color: #ffffff;
    border-radius: .15rem;
    padding: .5rem;
    & > div {
      overflow: hidden;
    }
    input {
      font-size: 0.6rem;
    }
    ::-webkit-input-placeholder {
      font-size: 0.6rem;
    }
    .tel {
      border: 1px solid $borderColor;
      height: $boxHei;
      line-height: $boxHei;
      border-radius: 0.15rem;
      text-align: left;
      padding-left: 0.45rem;
      i:first-child {
        float: left;
      }
      i:last-child {
        float: right;
        margin-right: 0.2rem;
        color: #888;
      }
      input {
        width: 6rem;
        height: $inpHei;
        line-height: $inpHei;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
        float: left;
        margin-left: 0.2rem;
      }
    }
    .verification {
      float: left;
      width: 60%;
      border: 1px solid $borderColor;
      height: $boxHei;
      line-height: $boxHei;
      margin-top: 0.36rem;
      margin-bottom: .36rem;
      border-radius: 0.15rem;
      text-align: left;
      padding-left: 0.45rem;
      i:first-child {
        float: left;
      }
      i:nth-of-type(2) {
        float: left;
        margin-right: 0;
        color: #888;
      }
      input {
        width: 3rem;
        height: $inpHei;
        line-height: $inpHei;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
        float: left;
        margin-left: 0.2rem;
      }
      .getCode {
        float: right;
        width: 2.7rem;
        color: #fff;
        background: $redDeepColor;
        text-align: center;
        font-size: 0.32rem;
      }
      &-btn {
        float: right;
        height: $boxHei;
        line-height: $boxHei;
        margin-top: 0.36rem;
        border-radius: 0.15rem;
      }
    }
    .psw {
      clear: both;
      border: 1px solid $borderColor;
      height: $boxHei;
      line-height: $boxHei;
      border-radius: 0.15rem;
      text-align: left;
      padding-left: 0.45rem;
      i:first-child {
        float: left;
      }
      i:last-child {
        float: right;
        margin-right: 0.2rem;
        color: #888;
      }
      input {
        width: 6rem;
        height: $inpHei;
        line-height: $inpHei;
        padding: 0;
        margin: 0;
        border: none;
        outline: none;
        float: left;
        margin-left: 0.2rem;
      }
    }
    .msg {
      text-align: left;
      margin-top: 0.3rem;
      font-size: 0.32rem;
      color: #000;
      span a {
        color: #48d8db;
        text-decoration: underline;
      }
    }
    .sublimt {
      background: $redDeepColor;
      height: $boxHei;
      line-height: $boxHei;
      margin-top: 0.36rem;   
      border-radius: 0.15rem;
      color: #fff;
      font-size: 0.4rem;
    }
    .tologin {
      margin-top: 0.4rem;
      font-size: 0.4rem;
      color: #000;
      span a {
        color: #48d8db;
        text-decoration: underline;
      }
    }
  }
}
.getcode1 {
  overflow: hidden;
  float: right;
  width: 35%;
  //background: -webkit-linear-gradient(left, #2ce9e8, #7dd7ff);
  background-color: $redDeepColor;
  display: inline-block;
  border-radius: 4px;
  font-size: 0.36rem;
  text-align: center;
  color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}

.getcode2 {
  overflow: hidden;
  float: right;
  width: 35%;
  text-align: center;
  background: $borderColor;
  display: inline-block;
  border-radius: 4px;
  font-size: 0.36rem;
  color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}

.verifycode-model {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  z-index: 11;
  text-align: left;
  top: 0;
  &-inner {
    border-radius: 0.12rem;
    overflow: hidden;
    width: 8rem;
    height: 5.3rem;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &-top {
      width: 100%;
      height: 1.5rem;
      background: #d8fcff;
      font-size: 0.45rem;
      box-sizing: border-box;
      padding-left: 0.34rem;
      color: gary;
      padding-top: 0.25rem;
      text-align: center;
      line-height: 1rem;
      color: $navColor;
      .iconfont {
        position: absolute;
        right: 0.34rem;
        top: 0.3rem;
        font-size: 0.6rem;
      }
    }
    &-content {
      box-sizing: border-box;
      padding: 0.8rem 0.4rem;
      input {
        width: 4.5rem;
        box-sizing: border-box;
        padding-left: 0.34rem;
        border: 1px solid #aaaaaa;
        outline: none;
        border-radius: 0.12rem;
        height: 1rem;
        float: left;
      }
      img {
        float: right;
        background: #d8fcff;
        width: 2.5rem;
        height: 1rem;
      }
    }
    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1.2rem; // background: $primaryColor;
      //background: -webkit-linear-gradient(right, #37c4d2, #6be3e6) !important;
      background-color: $redDeepColor;
      width: 100%;
      text-align: center;
      font-size: 0.45rem;
      line-height: 1.2rem;
      color: #fff;
    }
  }
}

.formrightC-warning {
  width: 100%;
  color: $iconColor;
  font-size: 0.3rem;
  position: absolute;
  bottom: 0.3rem;
  text-align: center;
}
</style>


